<template>
	<view>
		<!-- 中间弹出层 -->
	<!-- 	<u-popup :show="bookDetailShow" :round="10" mode="center" @close="closeBookDetail">
			<view class="bookDetail">
				<view class="msg">
					<view class="bookTitle">{{bookDetailName}}</view>
					<view class="isbn">
						ISBN编码：{{bookDetailIsbn}}
					</view>
					<view class="chooseCampus">
						<view class="font">
							选择校区：
						</view>
						<u-radio-group v-model="radiovalue1" placement="row">
							<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in radiolist1" :key="index" activeColor="#1b8008"
								:label="item.name" :name="item.name" @change="radioChangeOne(index)">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="chooseArear">
						<view class="font">
							选择区域：
						</view>
						<u-radio-group v-model="radiovalue2" placement="row">
							<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in radiolist2" :key="index" activeColor="#1b8008"
								:label="item.name" :name="item.name" @change="radioChangeTwo(index)">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="choosePrice">
						<view class="font">
							价格选择：
						</view>
						<u-radio-group v-model="radiovalue3" placement="row">
							<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in radiolist3" :key="index" activeColor="#1b8008"
								:label="item.name" :name="item.name" @change="radioChangeThree(index)">
							</u-radio>
						</u-radio-group>
					</view>
					<view :class="bookDetailButtonCss[0]" @click="chooseBookLevel(0)">
						8~9成新 库存:{{stockList[0]}}
					</view>
					<view :class="bookDetailButtonCss[1]" @click="chooseBookLevel(1)">
						5~7成新 库存:{{stockList[1]}}
					</view>
					<view :class="bookDetailButtonCss[2]" @click="chooseBookLevel(2)">
						1~4成新 库存:{{stockList[2]}}
					</view>
					<view class="countBuyBookView">
						<uni-number-box v-model="bookNumber" :max="bookNumberMax" class="countBuyBook"></uni-number-box>
					</view>
					加大主字体 -->
					<!-- <cn-money :money="9168.45" :size="48"></cn-money> -->
				<!-- 	<u-button type="warning" color="#1b8008" text="加入购物车" @click="addInShoppingCart"></u-button>
				</view>

			</view>
		</u-popup>
 -->
		<view class="twohandbook">
			<view class="progress_block" v-for="(item,index) in bookListShow">
				<view class="describe" :class="'block'">
					<view class="name">{{item.bookName}}</view>
					<view class="value">
						ISBN:{{item.isbn}}
					</view>
					<view class="value">库存:{{item.stock}}本 
					<view class="PurchaseNum">
						<!-- <u-number-box v-model="item.number" :min="0" :max="item.stock" :disabledInput="true"> -->
						
					<!-- 	<u-number-box v-model="item.number" @change="valChange(item.number,item.stock)"  :disabledInput="true"> -->
						<!-- </u-number-box> -->
						<!-- <view class="PurchaseIcon">
							<u-icon name="shopping-cart"  color="#000000" size="40"
								@click="addToCartVo(item)"></u-icon>
						</view> -->
						<!-- <view>
							<view class="cut" @click="cut(item)">
								<u-icon name="minus-circle" color="#5db4f4" size="28"></u-icon>
							</view>
							<view class="amount">2</view>
							<view class="add" @click="add(item)">
								<u-icon name="plus-circle-fill" color="#5db4f4" size="28"></u-icon>
							</view>
						</view> -->
						
						<!-- <view :hidden="this.isAddFlagArr[item.bookId]" class="bagCss">
							<u-icon name="bag-fill" color="#2979ff" size="50"></u-icon>
						</view> -->
						<!-- {{item.bookId}}
						{{isAddFlagArr[item.bookId]}}
						{{showBeforeArr[item.bookId]}} -->
						<view :hidden="this.showBeforeArr[item.bookId]" class="bagCss">
							<!-- <u-icon name="bag" color="#2979ff" size="50" @click="addToCartVo(item,bookListShow)"></u-icon> -->
							<image  class="fuzhiIcon" style="width: 60rpx;" :src="imageUrl" mode="widthFix" @click="copyWxNum(item,index)"></image>
							<!-- <image class="fuzhiIcon" v-if='item.click' style="width: 45rpx;" src="http://1.14.247.152:9797/images/11850fuzhicg.png"  mode="widthFix"></image> -->
							<!-- <image class="shauxinIcon" style="width: 40rpx;" src="http://1.14.247.152:9797/images/17309shuaxin.png"  mode="widthFix" @click="shuaxinWxNum(item,index)"></image> -->
							<view class="wxNumberCss">联系方式：{{item.wxNumber.length>9?item.wxNumber.substr(0,9)+'..':item.wxNumber}}</view>
						</view>
						 
					</view>
				
					<!-- <u-icon name="shopping-cart"  color="#aa55ff" size="30"
						@click="openBookDetail(index)"></u-icon> -->
					</view>
					
				
					
							<!-- <u-icon name="shopping-cart" color="#2979ff" size="50" label="购物车" labelPos="buttom"></u-icon> -->
					<!-- <view class="value">已修:{{item.series[0].value}}分</view> -->
					
				</view>
			
				<!-- <view class="charts-box arcbar" style="background-color: #FCFCFC;"> -->
					<!-- <view class="buy"> -->
					<!-- 	<u-icon name="shopping-cart" color="#2979ff" size="30"  labelPos="buttom"
							@click="openBookDetail(index)"></u-icon> -->
					<!-- </view> -->
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "twohandbook",
		props: {
			bookList: {
				type: Array
			},
			LLocation:{
				type:String
			},
			Cchengse:{
				type:String
			}
		},
		data() {
			return {
				switchFlag:true,
				//中间弹出层
				showBefore:false,
				isAddFlag:true,
				isAddFlagArr:[],
				showBeforeArr:[],
				bookDetailShow: false,
				bookDetailButtonCss: ["button", "button", "button"],
				bookDetailButtonIndex: "",
				chooseButton: "",
				imageUrl:'http://1.14.247.152:9797/images/14205icon-.png',
				bookNumber: 0,
				bookDetailId: "",
				bookDetailName: "",
				bookDetailIsbn: "",
				stockList: [],
				value: 0,
				radiovalue1: '海珠',
				radiovalue3: '低价优先',
				radiolist1: [{
					name: '海珠'
				},
				{
					name: '白云'
				}],
				radiolist2: [{
					name: '南区'
				},
				{
					name: '北区'
				}],
				radiolist3: [{
					name: '低价优先'
				},
				{
					name: '随机价格'
				}],
				firstRadioIndex: 0,
				secondRadioIndex: "",
				thirdRadioIndex: 0,
			
			};
		},
		computed: {
			bookListShow: {
				get() {
					console.log('999999999',this.limitNumber(this.bookList))
					return this.limitNumber(this.bookList)
				},
				set(value) {
					console.log(this.bookListShow)
					this.$forceUpdate()
				
				        }
			},
			bookNumberMax: {
				get(){
					return this.stockList[this.chooseButton]
				}
			}
		},
		created() {
			console.log("打开组件了")
			let vm = this
			console.log(vm.bookList)
			console.log(vm.LLocation)
			//vm.limitNumber()
		},
		methods: {
			// copyTap(){
				
			// }
			async copyWxNum(item,index){
				console.log('复制按钮被点了！bookId是：',item.bookId)
				if(item.wxNumber=="待匹配"){
					uni.showLoading({
				  	title: '匹配中'
				  })
				}
				let header = new Object
				header.Authority = getApp().globalData.Authority
				if(item.stock==0){
					wx.showToast({
					  title: '没有库存噢！',
					  icon: 'error',
					  duration: 500
					})
					return
				}
				let res1 = await getApp().UniRequest('/twohandbook/buyBookRecord/authority/matchWx?bookId='+item.bookId,'GET','',header)
				console.log('res$$$$$$',res1);
				if(res1.code==20000){
					if(item.wxNumber=='待匹配'){
						setTimeout(() => {
							uni.hideLoading()
							wx.setClipboardData({
							          data:res1.data.wxNumber,
							          success:  (res)=> {
										  wx.showToast({
										    title: '复制成功',
										    icon: 'success',
										    duration: 1000
										  })
							            console.log("复制成功:", res)
										console.log('index',index)
										console.log('res.data.wxNumber',res1.data.wxNumber)
										this.bookListShow=this.bookListShow.forEach((item,index1)=>{
											if(index==index1){
												console.log('res.data.wxNumber',res1.data.wxNumber)
												item.click = true;
												item.wxNumber=res1.data.wxNumber
												console.log(index1,'被点击了！')
											}else{
												item.click = false;
												
											}
										})
							          },
							        })
						}, 200)
					}else{
						wx.setClipboardData({
						          data:res1.data.wxNumber,
						          success:  (res)=> {
									  wx.showToast({
									    title: '复制成功',
									    icon: 'success',
									    duration: 1000
									  })
						            console.log("复制成功:", res)
									console.log('index',index)
									console.log('res.data.wxNumber',res1.data.wxNumber)
									this.bookListShow=this.bookListShow.forEach((item,index1)=>{
										if(index==index1){
											console.log('res.data.wxNumber',res1.data.wxNumber)
											item.click = true;
											item.wxNumber=res1.data.wxNumber
											console.log(index1,'被点击了！')
										}else{
											item.click = false;
											
										}
									})
						          },
						        })
					}
					
					
				}
				else{
					uni.hideLoading()
					wx.showToast({
					  title: '匹配失败',
					  icon: 'error',
					  duration: 1000
					})
				}
					// let vm = this

			},
			async shuaxinWxNum(item,index){
				console.log('刷新按钮被点了！bookId是：',item.bookId)
					uni.showLoading({
						title: '更新中'
					})
				let header = new Object
				header.Authority = getApp().globalData.Authority
				if(item.stock==0){
					wx.showToast({
					  title: '没有库存噢！',
					  icon: 'error',
					  duration: 500
					})
					return
				}
				let res1 = await getApp().UniRequest('/twohandbook/buyBookRecord/authority/matchWx?bookId='+item.bookId,'GET','',header)
				console.log('res$$$$$$刷新',res1);
				if(res1.code==20000){
					setTimeout(()=>{
						uni.hideLoading()
						this.bookListShow=this.bookListShow.forEach((item,index1)=>{
							if(index==index1){
								console.log('res.data.wxNumber',res1.data.wxNumber)
								item.wxNumber=res1.data.wxNumber
								item.click=false
								console.log(index1,'被点击了！')
							}
						})
						wx.showToast({
						  title: '已更新',
						  icon: 'success',
						  duration: 500
						})
					},200)
					
				}else{
					return
				}
				
			},
			async cut(addToCartVo){
				console.log('要发cut请求。。。')
				let vm = this
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let body = new Object
				body.redisId = addToCartVo.id
				let res = await getApp().UniRequest('/twohandbook/bookBill/authority/cutone','GET',body,header)
				console.log('发了cut请求。。。')
			},
			async add(addToCartVo){
				console.log(addToCartVo)
				console.log('!!!')
				let vm = this
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let body1 = new Object
				body1.redisId = addToCartVo.id
				//
				console.log(addToCartVo,this.LLocation,this.Cchengse)
				let body = new Object
				body.bookId = addToCartVo.bookId
				body.amount = addToCartVo.number
				body.chengse = this.Cchengse
				body.location = this.LLocation
				let data = await getApp().UniRequest("/twohandbook/bookBill/authority/addToShopCart", "POST", body,getApp().globalData.header)
				console.log(data)
				//
				let res = await getApp().UniRequest('/twohandbook/bookBill/authority/addone','GET',body1,header)
				if(res.data.flag == '超过12本'){
					uni.showToast({
						title: '不能超过12本哦',
						duration: 2000
					});
					return
				}
			},
			async openBookDetail(index,number) {
				let vm = this
				console.log(number)
				if(number>0){
				vm.bookDetailShow = true
				// vm.bookDetailName = vm.bookList[index].bookName
				// vm.bookDetailIsbn = vm.bookList[index].isbn
				// let bookId = vm.bookList[index].id
				// vm.bookDetailId = bookId
				// let data = await getApp().UniRequest("/twohandbook/textbook/bookDetail?bookId=" + bookId, "GET", "","")
				// console.log(data)
				// if (data.code == 20000) {
				// 	vm.stockList = data.data.list
				// }
				// vm.getBookDetailStock()
				}else{
					vm.bookDetailShow = false
				}
			},
			closeBookDetail() {
				let vm = this
				vm.bookDetailShow = false
				vm.chooseButton = ""
				vm.bookNumber = 0
				vm.bookDetailName = ""
				vm.bookDetailIsbn = ""
				vm.stockList = []
				vm.bookDetailId = ""
			},
			async addInShoppingCart() {
				let vm = this
				if (vm.chooseButton === "" || vm.bookNumber == 0) {
					//console.log("返回了")
					return
				}
				let body = new Object
				body.bookId = vm.bookDetailId
				body.amount = vm.bookNumber
				body.chengse = vm.chooseButton
				body.location = vm.firstRadioIndex  + vm.secondRadioIndex
				body.priceMode = vm.thirdRadioIndex
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = await getApp().UniRequest("/twohandbook/bookBill/authority/addToShopCart", "POST", body,getApp().globalData.header)
				uni.hideLoading()
				if (data.code == 20000) {
					vm.closeBookDetail()
					uni.showToast({
						title: '添加成功',
						duration: 1000
					});
				}
			},
			chooseBookLevel(index) {
				let vm = this
				if (vm.stockList[index] == 0) {
					return
				}
				vm.bookDetailButtonIndex = index
				let list = vm.bookDetailButtonCss
				list[index] = "buttonClick"
				for (let i = 0; i < list.length; i++) {
					if (i != index) {
						list[i] = "button"
					}
				}
				vm.bookDetailButtonCss = ""
				vm.bookDetailButtonCss = list
				vm.chooseButton = index
				vm.bookNumber = 0
			},
			limitNumber(oldList) {
				//当数组不合法就返回
				if (!oldList) {
					return oldList
				}
				let vm = this
				let list = new Array()
				for (let i = 0; i < oldList.length; i++) {
					let object = new Object
					object.stock = oldList[i].stock
					object.isbn=oldList[i].isbn;
					object.bookId=oldList[i].id
					let name = oldList[i].bookName
					//console.log(name)
					if (name.length >= 18) {
						name = name.slice(0, 16) + "..."
					}
					object.bookName = name
					object.number=1
					object.click=false
					object.wxNumber='待匹配'
					list.push(object)
				}
				return list
			},
			async addToCartVo(item,bookListShow){
				let vm = this;
				// console.log(vm.showBeforeArr[item.bookId])	//false
				// console.log(vm.isAddFlagArr[item.bookId])	//true
				// this.showBeforeArr[item.bookId] = true
				// this.isAddFlagArr[item.bookId] = false
				// console.log('########################')
				// console.log(vm.showBeforeArr[item.bookId])	//true
				// console.log(vm.isAddFlagArr[item.bookId])	//false
				// console.log(item.bookId)
				// vm.switchFlag = false;
				// vm.limitNumber(bookListShow)
				let body = new Object
				body.bookId = item.bookId
				body.amount = item.number
				body.chengse = this.Cchengse
				body.location = this.LLocation
				let data = await getApp().UniRequest("/twohandbook/bookBill/authority/addToShopCart", "POST", body,getApp().globalData.header)
				console.log(data)
				// let header = new Object
				// header.Authority = getApp().globalData.Authority
				// let res = await getApp().UniRequest('/twohandbook/bookBill/authority/getShopCart','GET','',header)
				// vm.carList = res.data.carList
				// let tempItem = item;
				// if(!res.data.carList){
				// 	console.log('!!@@@@@@@@@@@@@@@@')
				// 	return;
				// }
				// console.log(res.data.carList)
				// res.data.carList.forEach(function(item,index){
				// 	if(item.bookId === tempItem.bookId){
				// 		console.log('=============购物车有:')
				// 		console.log(item.bookId)
				// 		console.log(vm.showBeforeArr[item.bookId])	//false	展示
				// 		console.log(vm.isAddFlagArr[item.bookId])	//false 不展示
				// 		vm.showBeforeArr[item.bookId] = true
				// 		vm.isAddFlagArr[item.bookId] = true
				// 		console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@')
				// 		console.log(vm.showBeforeArr[item.bookId])	//true
				// 		console.log(vm.isAddFlagArr[item.bookId])	//true
				// 		vm.switchFlag = false
				// 	}
				// })
			},
			radioChangeOne(index){
				//console.log(index)
				let vm = this
				vm.firstRadioIndex = index
				if (index == 0){
					vm.radiolist2 = [{
						name: '南区'
					},
					{
						name: '北区'
					}]
				}else {
					vm.radiolist2 = [{
						name: 'xx'
					},
					{
						name: 'xx'
					}]
				}
				vm.getBookDetailStock()
			},
			radioChangeTwo(index){
				//console.log(index)
				let vm = this
				vm.secondRadioIndex = index
				vm.getBookDetailStock()
			},
			radioChangeThree(index){
				let vm = this
				vm.thirdRadioIndex = index
			},
			async getBookDetailStock(){
				let vm = this
				let location = vm.firstRadioIndex + vm.secondRadioIndex
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = await getApp().UniRequest("/twohandbook/sellBookRecord/bookDetailStock?bookId="+vm.bookDetailId+"&location="+location,"GET","","")
				uni.hideLoading()
				if (data.code == 20000){
					vm.stockList = data.data.list
					//把选的书本的数目清零
					vm.bookNumber = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.bagCss{
		float:right;
		margin-top: -53rpx;
		width: 217rpx;
		position: relative;
		.wxNumberCss{
			font-size: 24rpx;
			position: absolute;
			top: 62rpx;
			margin-left: -34rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 122%;
			color: #9c9c9c;
		}
		.shauxinIcon{
			
		}
		.fuzhiIcon{
			margin-left: 44rpx;
			margin-top: -6rpx;
		}
	}
	.bagCss_hide{
		display: none;
	}
	.twohandbook {
		width: 100%;
		.progress_block {
			display: flex;
			// justify-content: space-around;
			align-items: center;
			width: 93%;
			margin: auto;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			height: 200rpx;
			position: relative;
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;

			.describe {
				width: 100%;
				height: 100%;
				padding: 20rpx;
				letter-spacing: 4rpx;

				.name {
					position: relative;
					top: 23rpx;
					color: #000000;
					height: 23%;
					font-size: 36rpx;
					font-weight: 800;
					margin-bottom: 38rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					align-content: space-between;
					width: 562rpx;
				}

				.value {
					position: relative;
					top: 5rpx;
					color: #000000;
					font-size: 28rpx;
					height: 50rpx;
					// max-width: 144rpx;
				}
				.PurchaseNum{
					position: relative;
					margin-top: -40rpx;
					margin-left: 390rpx;
					
				}
				.PurchaseIcon{
					position: relative;
					margin-top: -68rpx;
					margin-left: 210rpx;
				}
			}

			// .charts-box {
			// 	width: 40%;
			// 	height: 100%;

			// 	.buy {

			// 		padding: 25rpx;

					.shopping-cart {
						margin: auto;
					}
			// 	}
			// }

			.block {
				// background-color: #1b8008;
				background: #ffffff;  /* fallback for old browsers */
				// background: -webkit-linear-gradient(to right, #45B649, #DCE35B);  /* Chrome 10-25, Safari 5.1-6 */
				// background: linear-gradient(to right, #45B649, #DCE35B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			}

		}

		// .progress_block:nth-child(6n+0) {
		// 	.block {
		// 		background-color: #87CEFA;
		// 	}
		// }

		// .progress_block:nth-child(6n+1) {
		// 	.block {
		// 		background-color: #EEAEEE;
		// 	}
		// }

		// .progress_block:nth-child(6n+2) {
		// 	.block {
		// 		background-color: #FAB215;
		// 	}
		// }

		// .progress_block:nth-child(6n+3) {
		// 	.block {
		// 		background-color: #B0C4DE;
		// 	}
		// }

		// .progress_block:nth-child(6n+4) {
		// 	.block {
		// 		background-color: #9BCD9B;
		// 	}
		// }

		// .progress_block:nth-child(6n+5) {
		// 	.block {
		// 		background-color: #87CEFA;
		// 	}
		// }
	}

	.bookDetail {
		background-color: #fcfcfc;
		width: 515rpx;
		height: 730rpx;
		border-radius: 30rpx;

		.msg {
			position: relative;
			margin: 17rpx;

			.bookTitle {
				font-size: 34rpx;
				margin-bottom: 20rpx;
			}

			.isbn {
				margin-bottom: 20rpx;
			}
			
			.chooseCampus{
				display: flex;
				margin-bottom: 20rpx;
			}
			
			.chooseArear{
				display: flex;
				margin-bottom: 20rpx;
			}
			
			.choosePrice{
				display: flex;
				margin-bottom: 20rpx;
			}

			.button {
				margin-bottom: 20rpx;
				border-radius: 5rpx;
				text-align: center;
				border-style: solid;
				border-color: #c8c8c8;
				color: #c8c8c8;
				border-width: 1rpx;
				border-radius: 40rpx;
				height: 70rpx;
				line-height: 2.2;
			}

			.buttonClick {
				margin-bottom: 20rpx;
				border-radius: 5rpx;
				text-align: center;
				border-style: solid;
				border-color: #3c9cff;
				color: #3c9cff;
				border-width: 1rpx;
				border-radius: 40rpx;
				height: 70rpx;
				line-height: 2.2;
			}
				
			.countBuyBookView {
				margin-bottom: 20rpx;

				.countBuyBook {
					position: relative;
					left: 150rpx;
				}
			}
		}
	}
</style>
